<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <title>充值管理（个人）</title>
    <base href="<%=basePath%>">
    <script src="lib/timePicker/WdatePicker/WdatePicker.js"></script>
  </head>
  
  <body>
  
  	<jsp:include page="common.jsp"></jsp:include>
  	<jsp:include page="alert.jsp"></jsp:include>
  	
  	<div class="secMenu-content">
  		<div class="list-hearBar">
  			<a class="btn page-role page-now" href="javascript:;">个人类型账户</a>
	  		<a class="btn page-role list-headBtn" href="electric/jsp/pay_payManage_company.jsp">公司类型账户</a>
	  		
	  		<a class="btn btn-primary list-headBtn" href="electric/jsp/pay_payNew_person.jsp">个人充值</a>
  			<a class="btn btn-primary list-headBtn" href="javascript:;">导出</a>
  		
	  		<form class="form-inline list-headRight right" role="form">
	  			充值日期 <input type="text" class="form-control Wdate sheet-searchInput2" placeholder="" onFocus="WdatePicker({lang:'zh-cn'})"> 至
	  			<input type="text" class="form-control Wdate sheet-searchInput2" placeholder="" onFocus="WdatePicker({lang:'zh-cn'})">
	  			
				<input type="text" class="form-control sheet-searchInput2" placeholder="请输入手机号">
							  
				<select class="form-control">
				  <option>选择站点</option>
				  <option>西斗门</option>
				  <option>西溪</option>
				</select>
				
				<button type="submit" class="btn btn-info">搜索</button>
			</form>
  		</div>
  	
  	 	<table class="table table-hover table-striped table-condensed list-table">
	      <thead>
	        <tr>
	          <th>日期</th>
	          <th>账号</th>
	          <th>所属个人</th>
	          <th>手机号</th>
	          <th>充值金额</th>
	          <th>充值站点</th>
	          <th>充值方式</th>
	          <th>操作员 /充值站点</th>
	          <th>操作</th>
	        </tr>
	      </thead>
	      
	      <tbody>
	        <tr>
	          <td>2016-11-23 13:51</td>
	          <td>000001</td>
	          <td>赵四</td>
	          <td>13800000000</td>
	          <td>1000.0</td>
	          <td>西斗门</td>
	          <td>支付宝</td>
	          <td>李红</td>
	          <td class="list-action">
	          	<a href="javascript:;" class="invoiceBtn">小票</a>
	          	<a href="javascript:;" class="delTr">删除</a>
	          </td>
	        </tr>
	        
	        <tr>
	          <td>2016-11-23 13:51</td>
	          <td>000002</td>
	          <td>赵四</td>
	          <td>13800000000</td>
	          <td>1000.0</td>
	          <td>西斗门</td>
	          <td>支付宝</td>
	          <td>李红</td>
	          <td class="list-action">
	          	<a href="javascript:;" class="invoiceBtn">小票</a>
	          	<a href="javascript:;" class="delTr">删除</a>
	          </td>
	        </tr>
	      </tbody>
	    </table>
	    
	    <nav>
		  <ul class="pagination right">
		    <li><a href="javascript:;">首页</a></li>
		    <li class="active"><a href="javascript:;">1</a></li>
		  	<li><a href="javascript:;">2</a></li>
		    <li><a href="javascript:;">3</a></li>
		    <li><a href="javascript:;">4</a></li>
		    <li><a href="javascript:;">5</a></li>
		    <li><a href="javascript:;">尾页</a></li>
		  </ul>
		</nav>
	</div>
	
	<!-- 小票 -->
   <div class="modal fade " id="invoiceModal" data-backdrop="static">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">小票</h4>
	      </div>
	      <div class="modal-body">
	        
			<form class="form-horizontal" role="form">
			  <div class="printContent clearfix" id="printContent">
			  	 <style type="text/css">
    				/* 小票样式 */
					.printContent-table{border: 1px solid #ccc;padding: 10px;}
					.printContent .table>tbody>tr>td{border: 0;}
					.printContent-title{text-align: center;font-size: 18px;font-weight: 600;}
					.signature{float: right;margin: 20px 50px 0 0;}
					.table-print{margin: 0 auto;}
					.table-print tr{height: 32px;line-height: 32px;vertical-align: top;}
		    	</style>
				  <div class="printContent-table">
					<table class="table-print">
				       <thead>
				        <tr>
				            <td colspan="4" class="printContent-title">车辆换电充值缴费记录</td>
				        </tr>
				       </thead>
			          <tbody>
				        <tr>
				            <td>账号</td>
				            <td colspan="3">2017030116514600000108</td>
				        </tr>
				        
				        <tr>
				        	<td width="20%">车牌号</td>
				        	<td width="38%">浙A12345</td>
				        	<td width="15%">金额</td>
				        	<td>100</td>
				        </tr>
				        
				        <tr>
				        	<td>姓名/公司</td>
				        	<td>张三张三张三张三张三张三张三</td>
				        	<td>电话</td>
				        	<td>13800000000</td>
				        </tr>
				        
				        <tr>
				        	<td>充值点</td>
				        	<td>西斗门</td>
				        	<td>余额</td>
				        	<td>65</td>
				        </tr>
				        
				        <tr>
				        	<td>操作员</td>
				        	<td>李红</td>
				        	<td>时间</td>
				        	<td>2017-03-07 14:35</td>
				        </tr>
			        </tbody>
				    </table>
			     	  <div class="signature">签名：</div>
			      </div>
		      </div><!-- printContent打印区域 -->
			</form>

	      </div>
	      <div class="modal-footer">
	      	<button type="button" class="btn btn-success modal-btn printBtn">打印</button>
	        <button type="button" class="btn btn-default modal-btn" data-dismiss="modal">取消</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<script src="lib/print/jquery.PrintArea.js"></script> 
	<script type="text/javascript">
		$(document).ready(function(){
			leftMenu.initBlock6_2();//左菜单栏初始化
			delEvent();//删除当前一行、批量删除
			invoiceEvent();//打印小票
		});
		
		function delEvent(){
			//删除框的确定事件
			$(".delSureBtn").on("click",function(){
				var thisBtn=$(this);
				$(".delFlag").css("display","none");//删除设有删除标记的行
				$(".newAlertBox").remove();
			});
			//删除框的取消事件
			$(".delOffBtn").on("click",function(){
				$(".list-table tr").removeClass("delFlag");//当删除框取消时，全部删除标记消失
			});
		}
		
		function invoiceEvent(){
			//显示要打印的内容
			$(".invoiceBtn").on("click",function(){
				$("#invoiceModal").modal('show');
			});
			
			//开始打印；
			$(".printBtn").click(function(){
				$("#printContent").printArea({mode: 'popup'});
			});
		}
  	</script>
  </body>
</html>

